<template>
	<view class="page">
		<navBar title="余额提现"></navBar>
		<view class="top">
			<view class="moneys">¥ {{userInfo.profit_money}}</view>
			<view class="label">可提现余额</view>
		</view>
		<view class="group">
			<view class="header">提现金额</view>
			<view class="input-money flex-btw">
				<view class="flex-center">
					<text class="icon">¥</text>
					<input :placeholder="placeholder" type="digit" v-model="form.money" />
				</view>
				<text class="all-btn" @click="allSetMoney">全部</text>
			</view>
		</view>
		<view class="group" v-if="false">
			<view class="header">打款方式</view>
		</view>
		<view class="group" v-if="false">
			<view class="header">打款信息</view>
			<view class="form">
				<view class="item">
					<text>微信转账</text>
				</view>
				<view class="item">
					<text>姓名：</text>
					<input placeholder="请填写你的姓名" v-model="form.name" />
				</view>
				<view class="item">
					<text>账号：</text>
					<input placeholder="请填写你的微信号" v-model="form.wechat" />
				</view>
			</view>
		</view>
		<view class="group">
			<view class="header">提现须知</view>
			<view class="remarks">
				<!-- <view class="li">1. 用户必须完成微信账号实名认证。</view>
				<view class="li">2. 根据腾讯公司微信自动提现规定，单日提现最高金额为500.00元。</view>
				<view class="li">3. 单日提现次数不能超过10次。</view>
				<view class="li">4. 24小时内自动到账。</view> -->
				<rich-text user-select :selectable="true" :nodes="incomeRule"></rich-text>
			</view>
		</view>
		<view class="confirm" @click="submit">立即提现</view>
	</view>
</template>

<script>
	import {
		minCashApi
	} from "@/utils/api";
	import {
		royaltyApi,
	} from '@/api/my.js'
	import {
		des_encrypt
	} from "@/utils/encrypt";
	import {
		mapActions,
		mapGetters
	} from "vuex";
	import navBar from '@/components/navBar/navBar.vue'
	export default {
		computed: {
			...mapGetters(["userInfo"]),
		},
		data() {
			return {
				val: 300,
				current: 0,
				minCash: 1,
				// 1-自动打款 2-打款方式
				type: 1,
				form: {
					name: '',
					wechat: '',
					way: 1,
					money: ""
				},
				incomeRule: '',
				maxCash: 500,
				text: ''
				
			};
		},
		components: {
			navBar
		},
		onLoad({
			type
		}) {
			this.current = Number(type);
			this.getMinCash()
			this.revenueRule()
		},
		computed: {
			placeholder() {
				return `最低提现${this.minCash}元`
			}
		},
		methods: {
			...mapActions(["setAttr"]),
			allSetMoney() {
				if (this.minCash > this.userInfo.profit_money) {
					uni.showToast({
						title: '可提现余额小于最低提现门槛',
						icon: 'none'
					})
					return
				}
				this.form.money = this.userInfo.profit_money
			},
			// 提现
			async submit() {
				// for (const key in this.form) {
				// 	if (!this.form[key]) {
				// 		return this.$utils.toast('请将信息填写完整')
				// 	}
				// }
				
				if((this.form.money < this.minCash) || (this.form.money > this.form.money) || (this.form.money > this.maxCash)) return uni.showToast({
					title: `请输入正确的提现金额范围在（${this.minCash} - ${this.maxCash}）`,
					icon: 'none'
				})
				let data = await royaltyApi(this.form)
				if (data.code === 200) {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			},
			getMinCash() {
				minCashApi().then(res => {
					if (res.code === 200) {
						this.minCash = parseFloat(res.data.min_withdraw_amount)
						this.maxCash = parseFloat(res.data.max_withdraw_amount)
						this.incomeRule = res.data.revenue_rule
					}
				})
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #EEEFF0;
		padding-bottom: 50rpx;
	}

	.top {
		width: 100%;
		@extend .flex-center;
		flex-direction: column;
		height: 300rpx;
		background-color: $primary-color;
		color: #FFF;
		font-size: 32rpx;

		.moneys {
			font-size: 48rpx;
			margin-bottom: 30rpx;
		}
	}

	.group {
		background-color: #fff;
		margin-bottom: 38rpx;
		overflow: hidden;

		.header {
			padding: 38rpx 42rpx;
			border-bottom: 1px solid #EEEFF0;
		}

		.input-money {
			padding: 38rpx 40rpx;

			.icon {
				font-size: 32rpx;
				color: #FF3B30;
				margin-right: 30rpx;
			}
		}

		.form {
			overflow: hidden;

			.item {
				@extend .flex-btw;
				font-size: 30rpx;
				margin: 20rpx 50rpx;
				margin-bottom: 42rpx;
				box-sizing: border-box;

				input {
					flex: 1;
					font-size: 30rpx;
				}
			}
		}

		.remarks {
			padding: 30rpx 40rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			line-height: 44rpx;
			user-select: text;
			-webkit-user-select: text
		}
	}

	.confirm {
		margin: 0 auto;
		background: linear-gradient(to right, #E7A854, #CB722C);
		width: calc(100% - 100rpx);
		@extend .flex-center;
		padding: 30rpx;
		color: #FFF;
		border-radius: 100rpx;
		box-shadow: 0 0 25rpx #CB722C;
	}
</style>
